<template>
  <view class="content-card">
    <view class="card-header">
      <view class="card-title">
        <u-icon :name="icon" color="#FF9FB5" size="22"></u-icon>
        <text>{{ title }}</text>
      </view>
      <view v-if="showMore" class="card-more" @tap="onMoreClick">
        <text>{{ moreText }}</text>
        <u-icon name="arrow-right" color="#999" size="18"></u-icon>
      </view>
    </view>
    
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
// 定义props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  showMore: {
    type: Boolean,
    default: true
  },
  moreText: {
    type: String,
    default: '详情'
  }
});

// 定义emit
const emit = defineEmits(['more-click']);

// 点击更多
const onMoreClick = () => {
  emit('more-click');
};
</script>

<style lang="scss" scoped>
.content-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.card-title u-icon {
  margin-right: 10rpx;
}

.card-more {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
}

.card-more text {
  margin-right: 6rpx;
}
</style> 